
<template>
  <div class="app-container">
    <div class="card-item">
      <el-form
        ref="form"
        :inline="true"
        :model="form"
        class="demo-form-inline"
      >
        <el-form-item label="选择大数据集群">
          <el-select
            v-model="form.cmFlag"
            size="small"
            placeholder="选择集群"
            @change="selectCm"
          >
            <el-option
              v-for="item in form.cmList"
              :key="item.cmFlag"
              :label="item.cmName"
              :value="item.cmFlag"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="选择子集群">
          <el-select
            v-model="form.clusterFlag"
            size="small"
            placeholder="选择集群"
            @change="selectTaskAllInfo()"
          >
            <el-option
              v-for="item in form.clusterList"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="任务类型">
          <el-select
            v-model="form.monitorType"
            size="small"
            placeholder="任务类型"
            @change="selectTaskAllInfo"
          >
            <el-option
              v-for="item in form.monitorTypeList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="dialogVisibleTime = true"
      >作业执行时间图</el-button>
      <el-button
        type="primary"
        @click="dialogVisibleCount = true"
      >作业数分布时间图</el-button>
      <el-button @click="url">
        CM访问地址
      </el-button>
    </div>

    <div style="margin-top: 1rem; display: grid; grid-template-columns: repeat(4,1fr); gap:0.6rem">
      <el-card
        shadow="none"
        :body-style="{ padding: '0px',cursor: 'pointer'}"
      >
        <div @click="clickCard">
          <div class="job-inf-title">
            今日已提交
            <el-tooltip
              class="item"
              effect="dark"
              content="今日已经提交的任务"
              placement="bottom"
            >
              <i
                style="margin-left: 3%"
                class="el-icon-question"
              />
            </el-tooltip>
          </div>
          <div class="job-inf-value">
            <span>
              <vns
                style="margin-bottom:30px;"
                :start="0"
                :end="monitorTask.toDaySubmit"
                :times="20"
                :speed="50"
              />
            </span>
            <img src="../../../assets/images/todoRun.png">
          </div>
        </div>
      </el-card>

      <el-card
        shadow="none"
        :body-style="{ padding: '0px',cursor: 'pointer' }"
      >
        <div @click="clickRunning">
          <div class="job-inf-title">
            执行中
            <el-tooltip
              class="item"
              effect="dark"
              content="所有正在执行的任务"
              placement="bottom"
            >
              <i
                style="margin-left: 3%"
                class="el-icon-question"
              />
            </el-tooltip>
          </div>
          <div class="job-inf-value">
            <span>
              <vns
                style="margin-bottom:30px;"
                :start="0"
                :end="monitorTask.toDayRunning"
                :times="20"
                :speed="50"
              />
            </span>

            <img src="../../../assets/images/running.png">
          </div>
        </div>
      </el-card>

      <el-card
        shadow="none"
        :body-style="{ padding: '0px',cursor: 'pointer' }"
      >
        <div @click="clickSuccess">
          <div class="job-inf-title">
            今日已成功
            <el-tooltip
              class="item"
              effect="dark"
              content="今日执行成功的任务"
              placement="bottom"
            >
              <i
                style="margin-left: 3%"
                class="el-icon-question"
              />
            </el-tooltip>
          </div>
          <div class="job-inf-value">
            <span>
              <vns
                style="margin-bottom:30px;"
                :start="0"
                :end="monitorTask.toDaySucceeded"
                :times="20"
                :speed="50"
              />
            </span>

            <img src="../../../assets/images/runSuccess.png">
          </div>
        </div>
      </el-card>

      <el-card
        shadow="none"
        :body-style="{ padding: '0px',cursor: 'pointer' }"
      >
        <div @click="clickLose">
          <div class="job-inf-title">
            今日已失败
            <el-tooltip
              class="item"
              effect="dark"
              content="今日执行失败的任务"
              placement="bottom"
            >
              <i
                style="margin-left: 3%"
                class="el-icon-question"
              />
            </el-tooltip>
          </div>
          <div class="job-inf-value">
            <span>
              <vns
                style="margin-bottom:30px;"
                :start="0"
                :end="monitorTask.toDayFailed"
                :times="20"
                :speed="50"
              />
            </span>
            <img src="../../../assets/images/runFail.png">
          </div>
        </div>
      </el-card>

    </div>

    <div
      class="card-item"
      style="margin-top: 1rem;"
    >
      <div
        v-if="form.monitorType == YARN_TYPE"
        style="font-size:14px;font-weight:bold;color:red"
      >注：双击单元行查看详情</div>
      <div
        v-if="crud.props.searchToggle"
        class="crud-group"
      >
        <!-- 搜索 -->
        <el-input
          v-model="query.user"
          clearable
          size="small"
          placeholder="用户"
          style="width: 200px;"
          @keyup.enter.native="toQuery"
        />
        <el-input
          v-if="form.monitorType !== 'YARN'"
          v-model="query.dbName"
          clearable
          size="small"
          placeholder="库名"
          style="width: 200px;"
          @keyup.enter.native="toQuery"
        />
        <el-input
          v-model="query.queue"
          clearable
          size="small"
          placeholder="队列名"
          style="width: 200px;"
          @keyup.enter.native="toQuery"
        />
        <el-date-picker
          v-model="query.dataDate"
          :default-time="['00:00:00', '23:59:59']"
          type="datetimerange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-select
          v-model="query.queryType"
          clearable
          size="small"
          placeholder="sql类型"
        >
          <el-option
            v-for="item in sqlType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="query.state"
          clearable
          size="small"
          placeholder="任务状态"
          @change="$forceUpdate()"
        >
          <el-option
            v-for="item in form.monitorType === YARN_TYPE ? stateList : stateListImpala"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- <el-select
                  v-model="query.jobType"
                  clearable
                  size="small"
                  placeholder="作业类型"
                >
                  <el-option
                      v-for="item in yarnAppType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select> -->
      </div>
      <rrOperation :crud="crud" />
      <crudOperation
        show=""
        :permission="permission"
      />
      <!--表格渲染-->
      <el-table
        v-if="form.monitorType == YARN_TYPE"
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%"
        @row-dblclick="detail"
      >
        <el-table-column
          v-if="columns.visible('id')"
          prop="id"
          label="id"
          width="180px"
        />
        <el-table-column
          v-if="columns.visible('user')"
          prop="user"
          label="用户"
          width="60px"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('name')"
          prop="name"
          label="任务名称"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('applicationType')"
          prop="applicationType"
          label="任务类型"
          show-overflow-tooltip
        />

        <el-table-column
          v-if="columns.visible('startedTime')"
          prop="startedTime"
          label="开始时间"
          width="90px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.startedTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('finishedTime')"
          prop="finishedTime"
          label="结束时间"
          width="90px"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.finishedTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('applicationDuration')"
          prop="applicationDuration"
          label="耗时"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.applicationDuration ? scope.row.applicationDuration : 'null' }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column v-if="columns.visible('state')" prop="state" label="执行状态" show-overflow-tooltip /> -->
        <el-table-column
          v-if="columns.visible('finalStatus')"
          prop="finalStatus"
          label="执行结果"
          show-overflow-tooltip
        />
        <!-- <el-table-column v-if="columns.visible('runningContainers')" prop="runningContainers" label="容器" show-overflow-tooltip />
              <el-table-column v-if="columns.visible('allocatedVCores')" prop="allocatedVCores" label="内核" show-overflow-tooltip />
              <el-table-column v-if="columns.visible('allocatedMB')" prop="allocatedMB" label="内存" show-overflow-tooltip />
              <el-table-column v-if="columns.visible('queueUsagePercentage')" prop="queueUsagePercentage" label="队列占比%" show-overflow-tooltip />
              <el-table-column
                v-if="columns.visible('clusterUsagePercentage')"
                prop="clusterUsagePercentage"
                label="集群占比%"
                show-overflow-tooltip
              /> -->
        <!-- <el-table-column
          v-if="columns.visible('mbMillis')"
          prop="mbMillis"
          label="内存分配"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('vcoresMillis')"
          prop="vcoresMillis"
          label="CPU分配"
          show-overflow-tooltip
        /> -->
        <el-table-column
          v-if="columns.visible('allocatedVCores')"
          prop="allocatedVCores"
          label="已分配的VCore数"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('allocatedMBStr')"
          prop="allocatedMBStr"
          label="已分配的内存"
          show-overflow-tooltip
        />
        <!-- <el-table-column
          v-if="columns.visible('hdfsBytesWritten')"
          prop="hdfsBytesWritten"
          label="写入的HDFS字节"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('fileBytesWritten')"
          prop="fileBytesWritten"
          label="写入的文件字节"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('hdfsBytesRead')"
          prop="hdfsBytesRead"
          label="读取的HDFS字节"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('fileBytesRead')"
          prop="fileBytesRead"
          label="读取的文件字节"
          show-overflow-tooltip
        /> -->
        <el-table-column
          v-if="columns.visible('memorySeconds')"
          prop="memorySeconds"
          label="已分配的内存秒数"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('vcoreSeconds')"
          prop="vcoreSeconds"
          label="已分配的VCORE秒数"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="columns.visible('queue')"
          prop="queue"
          label="队列名称"
        />
      </el-table>

      <el-table
        v-if="form.monitorType === IMPALA_TYPE"
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%"
      >
        <el-table-column
          v-if="columns.visible('appId')"
          prop="appId"
          show-overflow-tooltip
          label="任务id"
        />
        <el-table-column
          v-if="columns.visible('user')"
          prop="user"
          label="用户"
        />
        <el-table-column
          v-if="columns.visible('dbName')"
          prop="dbName"
          label="库名"
        />
        <el-table-column
          v-if="columns.visible('queryType')"
          prop="queryType"
          label="sql类型"
        />
        <el-table-column
          v-if="columns.visible('impalaSql')"
          prop="impalaSql"
          label="执行sql"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.impalaSql ? scope.row.impalaSql : 'null' }}</span>
          </template>
        </el-table-column>

        <el-table-column
          v-if="columns.visible('startTime')"
          prop="startTime"
          label="开始时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('endTime')"
          prop="endTime"
          label="结束时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="columns.visible('duration')"
          prop="duration"
          label="耗时"
        />
        <!-- <el-table-column v-if="columns.visible('scanProgress')" prop="scanProgress" label="执行进程" /> -->
        <el-table-column
          v-if="columns.visible('state')"
          prop="state"
          label="状态"
        />
        <el-table-column
          v-if="columns.visible('rowsFetched')"
          prop="rowsFetched"
          label="数据条数"
        />
        <el-table-column
          v-if="columns.visible('resourcePool')"
          prop="resourcePool"
          label="队列名称"
        />
      </el-table>
      <div class="pagination-container">
        <pagination />
      </div>
      <el-dialog
        :close-on-click-modal="false"
        :before-close="detailClose"
        :visible.sync="detailFlag"
        title="详情"
        width="800px"
      >
        <el-form
          :inline="true"
          label-width="150px"
        >
          <el-form-item label="id:">
            <el-input
              v-model="detailForm.id"
              disabled
              style="width:560px"
            />
          </el-form-item>
          <el-form-item label="用户:">
            <el-input
              v-model="detailForm.user"
              disabled
              style="width:560px"
            />
          </el-form-item>
          <el-form-item label="任务名称:">
            <el-input
              v-model="detailForm.name"
              disabled
              style="width:560px"
            />
          </el-form-item>
          <el-form-item label="任务类型:">
            <el-input
              v-model="detailForm.applicationType"
              disabled
            />
          </el-form-item>
          <el-form-item label="队列名称:">
            <el-input
              v-model="detailForm.queue"
              disabled
            />
          </el-form-item>
          <el-form-item label="开始时间:">
            <el-input
              v-model="detailForm.startedTime"
              disabled
            />
          </el-form-item>
          <el-form-item label="结束时间:">
            <el-input
              v-model="detailForm.finishedTime"
              disabled
            />
          </el-form-item>
          <el-form-item label="耗时:">
            <el-input
              v-model="detailForm.applicationDuration"
              disabled
            />
          </el-form-item>
          <el-form-item label="执行结果:">
            <el-input
              v-model="detailForm.finalStatus"
              disabled
            />
          </el-form-item>
          <el-form-item label="内存分配:">
            <el-input
              v-model="detailForm.mbMillis"
              disabled
            />
          </el-form-item>
          <el-form-item label="写入的HDFS字节:">
            <el-input
              v-model="detailForm.hdfsBytesWritten"
              disabled
            />
          </el-form-item>
          <el-form-item label="写入的文件字节:">
            <el-input
              v-model="detailForm.fileBytesWritten"
              disabled
            />
          </el-form-item>
          <el-form-item label="读取的HDFS字节:">
            <el-input
              v-model="detailForm.hdfsBytesRead"
              disabled
            />
          </el-form-item>
          <el-form-item label="读取的文件字节:">
            <el-input
              v-model="detailForm.fileBytesRead"
              disabled
            />
          </el-form-item>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
        >
          <el-button
            type="primary"
            @click="detailClose"
          >关 闭</el-button>
        </div>
      </el-dialog>
    </div>

    <el-row>
      <el-dialog
        title="作业执行时间图"
        :visible.sync="dialogVisibleTime"
        width="85%"
        :before-close="handleClose()"
        :close-on-click-modal="false"
        @open="selTaskJobTime()"
      >
        <el-form
          :inline="true"
          :model="tbForm"
          class="demo-form-inline"
        >
          <el-row>
            <el-form-item
              label="作业执行统计类型"
              prop="jobType"
            >
              <el-select
                v-model="tbForm.countTimeType"
                style="width: 178px"
              >
                <el-option
                  v-for="item in RUN_TIME_TYPE"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="选择时间">
              <el-date-picker
                v-model="tbForm.dateTimeData"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="输入用户">
              <!-- <el-select v-model="tbForm.user" clearable placeholder="请选择" @change="selTaskJobTime()">
                  <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
              <el-input
                v-model="tbForm.user"
                placeholder="请输入"
              />
            </el-form-item>
            <!-- <el-form-item v-if="form.monitorType!=IMPALA_TYPE" label="作业类型" prop="jobType">
                <el-select
                  v-model="tbForm.jobType"
                  clearable
                >
                  <el-option
                    v-for="item in yarnAppType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item> -->
            <el-form-item
              v-if="form.monitorType == IMPALA_TYPE"
              label="作业类型"
              prop="jobType"
            >
              <el-select
                v-model="tbForm.jobType"
                clearable
              >
                <el-option
                  v-for="item in sqlType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="作业状态"
              prop="jobType"
            >
              <el-select
                v-model="tbForm.state"
                clearable
              >
                <el-option
                  v-for="item in appState"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-button
              type="primary"
              size="mini"
              @click="selTaskJobTime()"
            >搜 索</el-button>
          </el-row>
        </el-form>
        <div
          class="block"
          style="margin-top:15px;"
        >
          <el-pagination
            align="center"
            :current-page="currentPage1"
            :page-sizes="[5, 10]"
            :page-size="pageSize1"
            layout="total, sizes, prev, pager, next, jumper"
            s
            :total="tbList.length"
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
          />
        </div>
        <el-card
          :body-style="{ padding: '-10px' }"
          style="cursor: pointer;margin: 10px;"
          shadow="none"
        >
          <div
            id="jobTimeId"
            style="width:100%;height: 380px;"
          />
        </el-card>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisibleTime = false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-row>

    <el-row>
      <el-dialog
        title="作业数分布时间图(默认展示当前集群YARN/IMPALA任务数)"
        :visible.sync="dialogVisibleCount"
        width="85%"
        :before-close="handleClose()"
        :close-on-click-modal="false"
        @open="selTaskJobCount()"
      >
        <el-form
          :inline="true"
          :model="tbForm"
          class="demo-form-inline"
        >
          <el-row>
            <el-form-item
              label="任务数量统计类型"
              prop="jobType"
            >
              <el-select
                v-model="tbForm.countType"
                style="width: 178px"
              >
                <el-option
                  v-for="item in taskcountType"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="选择时间">
              <el-date-picker
                v-model="tbForm.dateTimeData"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="输入用户">
              <!-- <el-select v-model="tbForm.user" clearable placeholder="请选择" @change="selTaskJobCount()">
                  <el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
              <el-input
                v-model="tbForm.user"
                placeholder="请输入"
              />
            </el-form-item>
            <!-- <el-form-item v-if="form.monitorType!=IMPALA_TYPE" label="作业类型" prop="jobType">
                <el-select
                  v-model="tbForm.jobType"
                  clearable
                >
                  <el-option
                    v-for="item in yarnAppType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item> -->
            <el-form-item
              v-if="form.monitorType == IMPALA_TYPE"
              label="作业类型"
              prop="jobType"
            >
              <el-select
                v-model="tbForm.jobType"
                clearable
              >
                <el-option
                  v-for="item in sqlType"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="作业状态"
              prop="jobType"
            >
              <el-select
                v-model="tbForm.state"
                clearable
              >
                <el-option
                  v-for="item in appState"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-button
              type="primary"
              size="mini"
              @click="selTaskJobCount()"
            >搜 索</el-button>
          </el-row>
        </el-form>
        <el-card
          shadow="none"
          :body-style="{ padding: '-10px' }"
          style="cursor: pointer;margin: 10px;"
        >
          <div
            id="jobCountId"
            style="width:100%;height: 380px;"
          />
        </el-card>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisibleCount = false">关 闭</el-button>
        </span>
      </el-dialog>
    </el-row>
    <el-row>
      <cmUrl ref="cmUrl" />
    </el-row>
  </div>
</template>
<script>
import vns from 'vue-number-scroll'
import monitor from '@/api/monitor/monitor'
import report from '@/api/system/reportManagement'
import moment from 'moment'
import * as echarts from 'echarts'

import CRUD, { presenter, header } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import {scrollableTooltipPositionFunc} from '@/utils/chartOption'

import cmUrl from './cmUrl.vue'

// crud交由presenter持有
const crud = CRUD({
  title: '任务监控',
  url: 'monitor_api/monitor/selTaskInfo',
  crudMethod: { ...monitor },
  queryOnPresenterCreated: false
})

// 折线图 公共
const jobCountTb = {
  xAxis: {
    type: 'category',
    data: ['用户1', '用户2', '用户3', '用户4', '用户5', '用户6', '用户7']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      interval: 0
    }
  },
  tooltip: {},
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      itemStyle: {
        normal: {
          color: '#7097ff'
        }
      }
    }
  ]
}
export default {
  name: 'AppInf',
  components: {
    vns, crudOperation, pagination, rrOperation, cmUrl
  },
  mixins: [header(), presenter(crud)],
  data() {
    return {
      jobTimeTb: {
        title: {
          text: '任务id/耗时ms'
        },
        tooltip: {
          trigger: 'axis',
          enterable: true, // 鼠标是否可进入提示框浮层中
          hideDelay: 200, // 浮层隐藏的延迟
          confine: true,
          position: scrollableTooltipPositionFunc,
          formatter: this.toolTipFormatter
        },
        legend: {},
        grid: {
          top: '15%',
          left: '8%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          barWidth: 20,
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
        },
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            data: [18203, 23489, 29034, 104970, 131744, 630230],
            itemStyle: {
              normal: {
                color: '#a6f7b5'
              }
            }
          }
        ]
      },
      jobCountTb: {
        title: {
          text: '任务id/耗时ms'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: this.toolTipFormatter
        },
        legend: {},
        grid: {
          top: '15%',
          left: '8%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          barWidth: 20,
          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '60%',
            data: [18203, 23489, 29034, 104970, 131744, 630230],
            itemStyle: {
              normal: {
                color: '#a6f7b5'
              }
            }
          }
        ]
      },
      permission: {
        add: ['add'],
        edit: ['edit'],
        del: ['del']
      },
      flag: false,
      queryOptions: [
        { columnName: 'user', columnValue: '用户', inputType: 1 },
        { columnName: 'dbName', columnValue: '库名', inputType: 1 },
        { columnName: 'queryType', columnValue: 'sql类型', inputType: 2, selectionData: [{ label: 'DDL', value: 'DDL' }, { label: 'DML', value: 'DML' }, { label: 'QUERY', value: 'QUERY' }, { label: 'SET', value: 'SET' }] },
        { columnName: 'state', columnValue: '任务状态', inputType: 2, selectionData: [{ value: 'RUNNING', label: '运行中' }, { value: 'FINISHED', label: '执行成功' }, { value: 'FAILED', label: '执行失败' }] },
        { columnName: 'dataDate', columnValue: '日期', inputType: 3 },
        { columnName: 'queue', columnValue: '队列名称', inputType: 1 },
        { columnName: 'jobType', columnValue: '作业类型', inputType: 2, selectionData: [{ label: 'IMPALA执行失败', value: 'EXCEPTION' }, { label: 'YARN_执行失败', value: 'FAILED' }, { label: 'IMPALA执行成功', value: 'FINISHED' }, { label: '正在运行', value: 'RUNNING' }, { label: 'YARN执行成功', value: 'SUCCESS' }] }
      ],
      lastCluster: '',
      jobCountTbChar: {},
      jobTimeTbChar: {},
      dialogVisibleTime: false,
      dialogVisibleCount: false,
      tbForm: { countType: 'HOUR', jobType: '', dateTimeData: [], state: '', countTimeType: 'MS' },
      tbList: [],
      userOptions: [],
      form: {
        dataTime: '2021-10-14 14：39：00',
        centerId: '1',
        clusterFlag: '',
        dataDate: [],
        monitorType: 'YARN',
        monitorTypeList: [{ 'key': 'YARN', 'value': 'YARN作业信息' }, { 'key': 'IMPALA', 'value': 'IMPALA作业信息' }],
        centerList: [{ 'key': '1', 'value': '上海唐镇' }, { 'key': '2', 'value': '上海万国' }, { 'key': '3', 'value': '北京信总' }],
        clusterList: [],
        cmFlag: ''
      },
      sltjtForm: {
        dateTimeData: []
      },
      jobDetailForm: {
        dataDate: []
      },
      currentPage: 1, // 当前页码
      currentPage1: 1, // 图的当前的页
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      detailFlag: false,
      detailForm: {},
      pageSize1: 10,
      value1: '',
      centerCluster: { centerClusters: [] },
      clientHeight: 0,
      YARN_TYPE: 'YARN',
      IMPALA_TYPE: 'IMPALA',
      RUN_TIME_TYPE: [{ value: 'MS', label: '毫秒' }, { value: 'S', label: '秒' }, { value: 'M', label: '分钟' }, { value: 'H', label: '小时' }],
      monitorTask: {
        dataTime: '',
        toDaySubmit: 0,
        toDayRunning: 0,
        toDaySucceeded: 0,
        toDayFailed: 0,
        hisFinished: 0,
        hisFailed: 0,
        impalaAppList: [],
        impalaRunningList: [],
        impalaFailList: [],
        impalaSuccList: [],
        appList: [],
        yarnAppList: [],
        yarnAppRunningList: [],
        yarnAppSuccList: [],
        yarnAppFailList: []
      },
      monitorTaskSelect: {
        impalaAppList: [],
        yarnAppList: []
      },
      monitorTaskTable: {
        appList: []
      },
      monitorReq: {
        monitorId: '1',
        monitorType: 'YARN',
        reqData: { 'aa': '1' }
      }, taskSelRules: {
        dataDate: [
          { validator: this.validateDate, trigger: ['blur', 'change'] }
        ]
      },
      stateList: [{ value: 'RUNNING', label: '运行中' }, { value: 'FINISHED', label: '执行成功' }, { value: 'FAILED', label: '执行失败' }],
      stateListImpala: [{ value: 'RUNNING', label: '运行中' }, { value: 'FINISHED', label: '执行成功' }, { value: 'EXCEPTION', label: '执行失败' }],
      yarnAppType: [{ label: 'Apache Flink', value: 'Apache Flink' }, { label: 'MAPREDUCE', value: 'MAPREDUCE' }, { label: 'Spark', value: 'Spark' }],
      taskcountType: [{ label: '日期', value: 'DAY' }, { label: '小时', value: 'HOUR' }],

      appState: [{ label: 'IMPALA执行失败', value: 'EXCEPTION' }, { label: 'YARN_执行失败', value: 'FAILED' }, { label: 'IMPALA执行成功', value: 'FINISHED' }, { label: '正在运行', value: 'RUNNING' }, { label: 'YARN执行成功', value: 'SUCCESS' }],
      sqlType: [
        { label: 'MAPREDUCE', value: 'MAPREDUCE' },
        { label: 'Apache Flink', value: 'Apache Flink' },
        { label: 'SPARK', value: 'SPARK' }
      ]
    }
  },
  watch: {
    form: function (val) {
      if (val === 'HOUR') {
        this.tbForm.countTimeType = 'MS'
      } else {
        this.tbForm.countTimeType = 'S'
      }
    },
    'form.monitorType': {
      handler: function (val) {
        if (val === this.YARN_TYPE) {
          this.sqlType = [
            { label: 'MAPREDUCE', value: 'MAPREDUCE' },
            { label: 'Apache Flink', value: 'Apache Flink' },
            { label: 'SPARK', value: 'SPARK' }
          ]
        } else {
          this.sqlType = [
            { label: 'DDL', value: 'DDL' },
            { label: 'DML', value: 'DML' },
            { label: 'QUERY', value: 'QUERY' }
          ]
        }
      },
      deep: true
    }
  },
  async created() {
    // this.query.monitorType = this.form.monitorType
    // this.query.clusterFlag = this.form.clusterFlag
    // crud.toQuery()
    crud.defaultQuery.centerId = this.form.centerId

    crud.defaultQuery.user = ''
    crud.defaultQuery.dataDate = []
    crud.defaultQuery.dbName = ''
    crud.defaultQuery.queue = ''
    crud.defaultQuery.queryType = ''
    crud.defaultQuery.state = ''

    await this.selAllCm()
    if (this.$route.query.clusterIndex) {
      const index = this.$route.query.clusterIndex
      this.form.cmFlag = this.form.cmList[index].cmFlag
      this.form.clusterFlag = this.form.cmList[index].clusterFlag
    }
    if (this.$route.query.type) {
      this.form.monitorType = this.$route.query.type.toUpperCase()
    }
    if (this.$route.query.state) {
      const state = this.$route.query.state
      if (state !== 'submit' || state !== 'summary') {
        switch (state) {
          case 'running':
            this.query.state = 'RUNNING'
            break
          case 'succeed':
            this.query.state = 'FINISHED'
            break
          case 'failed':
            if (this.form.monitorType === 'YARN') {
              this.query.state = 'FAILED'
            } else {
              this.query.state = 'EXCEPTION'
            }
            break
        }
        if (state === 'summary') {
          this.dialogVisibleCount = true
        }
      }
    }
    this.selClusterInfos()
    this.selAllOptions()
  },
  methods: {
    toolTipFormatter(params) {
      const currentIndex = params[0].dataIndex + (this.currentPage1 - 1) * this.pageSize1
      return `<div style="max-height: 240px;overflow-y:auto;max-width:700px;white-space: normal;">
        ${params[0].marker}耗时：${params[0].value}<br/>${this.tbList[params[0].dataIndex].id}<br/>${this.tbList[currentIndex].sql}</div>`
    },
    /**
  * @param {number} size
  * @returns {string}
  */
    formatSize(size) {
      if (size < 1024) {
        return size + ' MB'
      } else {
        return (size / 1024).toFixed(2) + ' GB'
      }
    },
    dateFormat(date) {
      if (date === undefined) {
        return ''
      }
      return moment(parseInt(date)).format('YYYY-MM-DD HH:mm:ss')
    },
    load() {

    },
    url() {
      this.$refs.cmUrl.flag = true
    },
    off() {
      this.flag = false
    },
    initTimeEcharts() {
      this.$nextTick(() => {
        this.dialogVisibleTime = true
        const tJobTimeTb = this.jobTimeTb
        this.jobTimeTbChar = echarts.init(document.getElementById('jobTimeId'))
        const yTimeData = []
        const xTimeData = []
        var temp = this.tbList
        temp = temp.slice((this.currentPage1 - 1) * this.pageSize1, this.currentPage1 * this.pageSize1)
        for (const item of temp) {
          yTimeData.push(item.usedTime)
          xTimeData.push(item.sql.length > 40 ? item.sql.substring(0, 40) + '...' : item.sql)
        }
        tJobTimeTb.series[0].data = yTimeData
        tJobTimeTb.yAxis.data = xTimeData
        this.jobTimeTbChar.setOption(tJobTimeTb)
      })
    },
    initCountEcharts() {
      this.$nextTick(() => {
        const yData = []
        const xData = []
        for (const item of this.tbList) {
          xData.push(item.jobCount)
          yData.push(item.startedTime)
        }
        this.dialogVisibleCount = true
        const tJobCountTb = jobCountTb
        this.jobTimeTbChar = echarts.init(document.getElementById('jobCountId'))
        tJobCountTb.series[0].data = xData
        tJobCountTb.xAxis.data = yData
        this.jobTimeTbChar.setOption(tJobCountTb)
      })
    }, selectTaskCountType() {
      this.initCountEcharts()
    }, validateDate(rule, value, callback) {
      if (value != null && value.length > 0) {
        const startDate = Date.parse(value[0].substr(0, 10))
        const endDate = Date.parse(value[1].substr(0, 10))
        const days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000)
        if (days > 31) {
          callback(new Error(`查询日期不能大于31天`))
        } else {
          callback()
        }
      }
      callback()
    },
    selectTaskAllInfo() {
      delete this.query['queryType'] // TODO:需要优化这里的逻辑
      this.selTaskCount()
      this.query['monitorType'] = this.form.monitorType
      this.query['clusterFlag'] = this.form.clusterFlag
      this.query['cmFlag'] = this.form.cmFlag
      this.query['centerId'] = this.form.centerId
      this.query['state'] = ''
      if (this.form.monitorType === 'YARN') {
        this.queryOptions[3].selectionData = [{ value: 'RUNNING', label: '运行中' }, { value: 'FINISHED', label: '执行成功' }, { value: 'FAILED', label: '执行失败' }]
      } else if (this.form.monitorType === 'IMPALA') {
        this.queryOptions[3].selectionData = [{ value: 'RUNNING', label: '运行中' }, { value: 'FINISHED', label: '执行成功' }, { value: 'EXCEPTION', label: '执行失败' }]
      }
      crud.toQuery()
    },
    selTaskCount() {
      this.query['monitorType'] = this.form.monitorType
      this.query['clusterFlag'] = this.form.clusterFlag
      this.query['cmFlag'] = this.form.cmFlag
      this.query['centerId'] = this.form.centerId
      // this.form.centerId = sessionStorage.getItem('sysKernelId')
      const reqData = {
        'centerId': this.form.centerId,
        'cmFlag': this.form.cmFlag,
        'clusterFlag': this.form.clusterFlag,
        'monitorType': this.form.monitorType
      }
      monitor.selTaskCount(reqData).then(res => {
        this.monitorTask = res
      })
    },
    selTaskJobCount() {
      // this.form.centerId = sessionStorage.getItem('sysKernelId')
      const reqData = {
        'centerId': this.form.centerId,
        'clusterFlag': this.form.clusterFlag,
        cmFlag: this.form.cmFlag,
        'monitorType': this.form.monitorType,
        'countType': this.tbForm.countType,
        'jobType': this.tbForm.jobType,
        'user': this.tbForm.user,
        'dateTimeData': this.tbForm.dateTimeData,
        'state': this.tbForm.state
      }
      monitor.selTaskJobCount(reqData).then(res => {
        if (res != null) {
          this.tbList = res
          this.initCountEcharts()
        }
      })
    }, selTaskJobTime() {
      // this.form.centerId = sessionStorage.getItem('sysKernelId')
      const reqData = {
        'centerId': this.form.centerId,
        'clusterFlag': this.form.clusterFlag,
        cmFlag: this.form.cmFlag,
        'monitorType': this.form.monitorType,
        'countType': this.tbForm.countType,
        'jobType': this.tbForm.jobType,
        'user': this.tbForm.user,
        'dateTimeData': this.tbForm.dateTimeData,
        'state': this.tbForm.state,
        'countTimeType': this.tbForm.countTimeType
      }
      monitor.selTaskJobTime(reqData).then(res => {
        if (res != null) {
          this.tbList = res
          this.initTimeEcharts()
        }
      })
    }, refreshTaskCount() {
      this.getMonitorTaskCount()
    }, handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    }, handleSizeChange1(val) {
      this.currentPage1 = 1
      this.pageSize1 = val
      this.initTimeEcharts()
    }, clickCard() {
      this.crud.page.current = 0
      this.query.dataDate = []
      this.query['state'] = ''
      this.crud.refresh()
    },
    clickRunning() {
      this.crud.page.current = 0
      this.query['state'] = 'RUNNING'
      this.query.dataDate = []
      this.crud.refresh()
    },
    clickSuccess() {
      this.crud.page.current = 0
      this.query['state'] = 'FINISHED'
      this.query.dataDate = []
      this.crud.refresh()
    },
    clickLose() {
      this.crud.page.current = 0
      this.query.dataDate = []
      if (this.form.monitorType === 'YARN') {
        this.query['state'] = 'FAILED'
        this.crud.refresh()
      } else if (this.form.monitorType === 'IMPALA') {
        this.query['state'] = 'EXCEPTION'
        this.crud.refresh()
      }
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      debugger
      this.currentPage = val
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`)
      this.currentPage1 = val

      this.initTimeEcharts()
    }, selAllOptions() {
      report.selAllOptions().then(res => {
        this.userOptions = res.userOptions
      }).catch(err => {
        if (err != null) {
          console.log(err.response.data.message)
        } else {
          console.log('请求失败!')
        }
      })
    },
    openUrl(data) {
      window.open(data.value)
    }, handleClose() {
      // this.dialogVisibleCount = false
      // this.dialogVisibleTime = false
    },
    async selAllCm() {
      const reqData = { 'centerId': this.form.centerId }
      const res = await monitor.selAllCm(reqData)
      this.form.cmList = res
      this.form.cmFlag = res[0].cmFlag
      this.form.clusterFlag = res[0].clusterFlag
      if (this.$route.query.cmFlag !== undefined) {
        this.form.cmFlag = this.$route.query.cmFlag
      }
    },
    selectCm(value) {
      this.form.clusterFlag = this.form.cmList.find(item => item.cmFlag === value).clusterFlag
      this.selClusterInfos()
    },
    selClusterInfos() {
      if (this.$route.query.clusterFlag !== undefined) {
        this.form.clusterFlag = this.$route.query.clusterFlag
      }
      // this.userOptions = res.userOptions
      this.query['monitorType'] = this.form.monitorType
      this.query['cmFlag'] = this.form.cmFlag
      this.query['clusterFlag'] = this.form.clusterFlag
      this.query['centerId'] = this.form.centerId
      this.selTaskCount()
      crud.toQuery()
    },
    detail(row, column, event) {
      this.detailForm = row
      this.detailFlag = true
    },
    detailClose() {
      this.detailFlag = false
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-card__header {
  padding: 10px 15px;
}

.job-inf-title {
  padding-top: 10px;
  padding-left: 10px;
  /*font-weight: 600;*/
}

.job-inf-value {
  padding: 10px;
  font-size: 20px;
}

.job-inf-value span {
  position: relative;
  top: 10px;
}

.job-inf-value img {
  width: 40px;
  padding-bottom: 10px;
  float: right;
}

.el-button--mini {
  padding: 7px 10px;
}

.el-button--small {
  padding: 6px 10px;
}

.UrlBox {
  color: #4b06ee;
  margin-left: 10px;
}
</style>
